<template>
	<div class="common-layout" >
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<!-- 第一行 -->
				<el-row >
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.not_money' title="可提现佣金数(元)"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.had_money' title="累计结算佣金(元)"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic :value='data.in_money'  title="提现中佣金(元)"/>
					</el-col>
					<el-col :span="6" style="padding-left: 20px;">
					    <el-statistic title="待结算佣金(元)" :value="data.will_money" />
					</el-col>
				</el-row>
				<!-- 第三行 -->
				<div class="boxrow">
				<div class="left">
					<h3 style="margin: 30px 20px;">分销商概览</h3>
					<el-row>
							<el-col :span="8" style="padding-left: 20px;">
								<el-statistic :value='data.count_examine' title="申请中(人)"/>
							</el-col>
							<el-col :span="8" style="padding-left: 20px;">
								<el-statistic :value='data.count_distributor' title="分销商(人)"/>
							</el-col>
							<el-col :span="8" style="padding-left: 20px;">
								<el-statistic :value='data.count_proxy'  title="渠道代理(人)"/>
							</el-col>
					</el-row>
					<div class="echarts-container" style="width: 100%;margin-top: 20px;">
						<div class="chart-item" ref="echartsRef" style="width: 550px;height:300px;"></div>
					</div>
				</div>
				<div class="right">
					<h3 style="margin: 30px 20px 60px 20px;">分销佣金</h3>
					<el-row style="margin-bottom: 50px;">
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.total_money' title="佣金总额(元)"/>
							</el-col>
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.distribution_money' title="分销佣金(元)"/>
							</el-col>
					</el-row>
					<el-row style="margin-bottom: 50px;">
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.task_money' title="任务奖励(元)"/>
							</el-col>
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.team_money' title="团队分红(元)"/>
							</el-col>
					</el-row>
					<el-row style="margin-bottom: 50px;">
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.count_examine' title="渠道代理(元)"/>
							</el-col>
							<el-col :span="12" style="padding-left: 20px;">
								<el-statistic :value='data.count_distributor' title="销售奖励(元)"/>
							</el-col>
					</el-row>
				</div>
				
				</div>
				
				
			</el-main>
		</el-container>
	</div>
</template>
<script setup>
	import Header from "@/components/Header.vue"
	import {reactive,ref,onMounted} from 'vue';
	import {useCounterStore} from "../stores/counter"
	import {
		getdisabout,
		
		} from "@/api"
	import {uploadUrl,baseUrl} from "@/utils/request";
	import {Plus} from '@element-plus/icons-vue'
	import {ArrowRight,CaretBottom,CaretTop,Warning} from '@element-plus/icons-vue'
	import * as echarts from 'echarts';
	// const nowTime = ref('')

	// const formateDate = () => {
	// 	const time = new Date()
	// 	const year = time.getFullYear()
	// 	const month = time.getMonth() + 1
	// 	const day = time.getDate()
	// 	const hour = time.getHours()
	// 	const minute = time.getMinutes()
	// 	const second = time.getSeconds()
	// 	return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	// }
	// let timer = 0

	let data=reactive({})
	//概况列表
	const disabout = async ()=>{
		let res=await getdisabout({
			siteId:Number(sessionStorage.getItem("siteId"))
		})
		// console.log(res);
		// for(var i in res){
		// 	if(res[i]==null){
		// 		res[i]=0
		// 	}
		// }
		Object.assign(data,res);
		// console.log("分销概况",data)
	}
	
	const echartsRef = ref(null);
	onMounted(() => {
	  const chart = echarts.init(echartsRef.value);
	  const option = {
	    // ECharts 配置项
	    title: {
	      text: '新增分销商人数'
	    },
	    tooltip: {},
	    xAxis: {
	      data: ['05-08', '05-09', '05-10', '05-11', '05-12', '05-13']
	    },
	    yAxis: {
			type:"value"
		},
	    series: [{
	      name: '人数',
	      type: 'line',
	      data: [1,2,3,4,5,6]
	    }]
	  };
		chart.resize({
		    width: 550,
		    height: 400
		});
	  chart.setOption(option);
	});
	
	
	onMounted(() => {
		disabout()
	})
</script>
<style scoped lang="less">
	.boxrow{
		display: flex;
	}
	.left{
		width: 60%;
	}
	.right{
		width: 40%;
	}
	.common-layout {
		background: #f2f3f5;
		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	
	// 统计卡片
	:global(h2#card-usage ~ .example .example-showcase) {
	  background-color: var(--el-fill-color) !important;
	}
	
	.el-statistic {
	  --el-statistic-content-font-size: 28px;
	}
	
	.statistic-card {
	  height: 100%;
	  padding: 20px;
	  border-radius: 4px;
	  background-color: var(--el-bg-color-overlay);
	}
	
	.statistic-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
	  font-size: 12px;
	  color: var(--el-text-color-regular);
	  margin-top: 16px;
	}
	
	.statistic-footer .footer-item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.statistic-footer .footer-item span:last-child {
	  display: inline-flex;
	  align-items: center;
	  margin-left: 4px;
	}
	
	.green {
	  color: var(--el-color-success);
	}
	.red {
	  color: var(--el-color-error);
	}

	.echarts-container {
	  display: flex !important;
	  justify-content: space-evenly !important; /* 图表之间有间隔 */
	}
	// .el-row{
	// 	margin-top: 50px;
	// }
	// .chart-item {
	//   flex: 1; /* 图表平分空间 */
	// }
</style>
